<template>
  <div class="mod-config">
    <div class="firstTable" v-loading="tableLoading">
      <div class="tableSelect">
        <div class="leftNameList">
          <div class="nameBlock headBox">自动爬取</div>
          <div class="nameBlock">三水区每日水量</div>
          <div class="nameBlock">丹灶区每日水量</div>
          <div class="nameBlock">金沙片区每日水量</div>
          <div class="nameBlock">禅城每日水量</div>
          <div class="nameBlock">西樵每日水量</div>
          <div class="nameBlock">西江每日总供水</div>
          <div class="nameBlock">西江每日总售水</div>
          <div class="nameBlock">南江工业区合计数</div>
          <div class="nameBlock">供售差额</div>
        </div>
        <div class="rightDataPart" ref="mortalTable">
          <div
            class="rightNameList"
            v-for="(item, index) in autoDataList"
            :key="index"
          >
            <div class="nameBlock headBox">{{ item.dateTime }}</div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfSanShui == "string"
                  ? "/"
                  : item.dailyFlowOfSanShui.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfDanZao == "string"
                  ? "/"
                  : item.dailyFlowOfDanZao.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfJinSha == "string"
                  ? "/"
                  : item.dailyFlowOfJinSha.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfChanCheng == "string"
                  ? "/"
                  : item.dailyFlowOfChanCheng.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfXiQiao == "string"
                  ? "/"
                  : item.dailyFlowOfXiQiao.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.xjTotalPWaterSupportDaily == "string"
                  ? "/"
                  : item.xjTotalPWaterSupportDaily.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.xjTotalPWaterSellDaily == "string"
                  ? "/"
                  : item.xjTotalPWaterSellDaily.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.nanJiangTotal == "string"
                  ? "/"
                  : item.nanJiangTotal.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.saleOfDifference == "string"
                  ? "/"
                  : item.saleOfDifference.toFixed(2)
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="firstTable" v-loading="tableLoading">
      <div class="tableSelect">
        <div class="leftNameList">
          <div class="nameBlock headBox">手动爬取</div>
          <div class="nameBlock">三水区每日水量</div>
          <div class="nameBlock">丹灶区每日水量</div>
          <div class="nameBlock">金沙片区每日水量</div>
          <div class="nameBlock">禅城每日水量</div>
          <div class="nameBlock">西樵每日水量</div>
          <div class="nameBlock">西江每日总供水</div>
          <div class="nameBlock">西江每日总售水</div>
          <div class="nameBlock">南江工业区合计数</div>
          <div class="nameBlock">供售差额</div>
        </div>
        <div class="rightDataPart" ref="handsTable">
          <div
            class="rightNameList"
            v-for="(item, index) in copyDataList"
            :key="index"
          >
            <div class="nameBlock headBox">{{ item.dateTime }}</div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfSanShui == "string"
                  ? "/"
                  : item.dailyFlowOfSanShui.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfDanZao == "string"
                  ? "/"
                  : item.dailyFlowOfDanZao.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfJinSha == "string"
                  ? "/"
                  : item.dailyFlowOfJinSha.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfChanCheng == "string"
                  ? "/"
                  : item.dailyFlowOfChanCheng.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.dailyFlowOfXiQiao == "string"
                  ? "/"
                  : item.dailyFlowOfXiQiao.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.xjTotalPWaterSupportDaily == "string"
                  ? "/"
                  : item.xjTotalPWaterSupportDaily.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.xjTotalPWaterSellDaily == "string"
                  ? "/"
                  : item.xjTotalPWaterSellDaily.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.nanJiangTotal == "string"
                  ? "/"
                  : item.nanJiangTotal.toFixed(2)
              }}
            </div>
            <div class="nameBlock">
              {{
                typeof item.saleOfDifference == "string"
                  ? "/"
                  : item.saleOfDifference.toFixed(2)
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      tableLoading: false,
      startTime: null, // 开始时间
      endTime: null, // 结束时间
      time: [],
      autoDataList: [], // 自动爬取数据
      copyDataList: [], // 手抄爬取数据
      dayTimeOptions: [],
      dom: null,
      theOterDom: null
    };
  },
  mounted() {
    // 获取需要绑定的table
    this.dom = this.$refs.mortalTable;
    this.dom.addEventListener("scroll", () => {
      this.$refs.handsTable.scrollLeft = this.dom.scrollLeft;
    });
    // this.theOterDom = this.$refs.handsTable;
    // this.theOterDom.addEventListener('scroll', () => {
    //   this.$refs.mortalTable.scrollLeft = this.theOterDom.scrollLeft
    // });
  },
  methods: {
    // 获取数据列表
    init(timeGroup) {
      this.tableLoading = true;
      this.time = timeGroup;
      this.startTime = timeGroup[0];
      this.endTime = timeGroup[1];
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl("/cms/dailySummary/dailyFlowOfEachArea"),
          method: "get",
          params: this.$http.adornParams({
            startDate: this.startTime,
            endDate: this.endTime
          })
        })
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.autoDataList = data.dailyFlowOfEachArea.autoList;
              this.copyDataList = data.dailyFlowOfEachArea.copyList;
              this.tableLoading = false;
            } else {
              this.autoDataList = [];
              this.copyDataList = [];
              this.tableLoading = false;
            }
          })
          .catch(() => {
            this.tableLoading = false;
          });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  height: 8px;
  position: absolute;
  left: 0;
  bottom: -6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
